// 首页热招职位的组件
import style from "./style.module.css";
import { Link } from "react-router-dom";
import { IRecruit } from "../../types";
import * as Enum from "../../assets/enum";

interface Props {
  recruit: IRecruit;
}

export default function HomeRecruitItem(props: Props) {
  return (
    <Link
      to={"/recruit/" + props.recruit._id}
      className={style.recruitItem}
      onClick={() => {
        window.scrollTo(0, 0);
      }}
    >
      <div className={style.title}>
        <span className={style.titleName}>{props.recruit.positionName}</span>
        <span className={style.titleSalary}>
          {props.recruit.salary.min}-{props.recruit.salary.max}K
        </span>
      </div>
      <div className={style.name}>
        <span className={style.companyName}>
          {props.recruit.companys[0]?.companyShortName}
        </span>
        <span className={style.city}>{props.recruit.city}</span>
      </div>
      <div className={style.keylist}>
        <span className={style.keyItem}>
          {Enum.toYear(props.recruit.workYear)}
        </span>
        <span className={style.keyItem}>
          {Enum.toEducation(props.recruit.education)}
        </span>
        {props.recruit.keyWords.slice(0, 3).map((item, index) => {
          return (
            <span className={style.keyItem} key={index}>
              {item}
            </span>
          );
        })}
      </div>
      <div className={style.user}>
        <div className={style.userInfo}>
          <img
            className={style.avatar}
            src={`/api/user/download/${props.recruit.users[0]._id}`}
            alt="用户头像"
          />
          <span className={style.userName}>
            {props.recruit.users[0].name}·{props.recruit.users[0].positionName}
          </span>
        </div>
        <button className={style.btn}>立即沟通</button>
      </div>
    </Link>
  );
}
